<template>
  <div class="bg-[#FAF9F9]">
    <!-- 搜索 -->
    <!-- 搜索 -->
    <!-- 搜索 -->
    <div
      class="bg-[url('~/assets/img/commonproblem.png')] bg-no-repeat bg-cover max-lg:p-4 bg-center w-full lg:h-[24rem] max-lg:aspect-[23/10] flex flex-col justify-center items-center lg:gap-12 gap-4"
    >
      <h1 class="font-semibold lg:text-[3rem] text-[1.5rem] text-white">How Can We Help?</h1>
      <div
        class="lg:w-[37.5rem] max-lg:w-3/4 lg:h-[3.5rem] h-[2.5rem] rounded-[1.8125rem] border-[.125rem] has-[:focus]:ring-2 bg-white placeholder: border-solid gap-[.6rem] flex items-center px-[1.875rem]"
      >
        <div class="flex-1 flex justify-between gap-[1.25rem] items-center">
          <input
            type="text"
            class="outline-none text-[1rem] w-full !bg-transparent text-black"
            :placeholder="$t('formPlaceholder.search')"
            v-model="searchterms"
            @keyup.enter="handleSearch"
          />
          <span v-if="searchterms" class="el-icon-circle-close text-[1.25rem] text-[#999999] flex-none cursor-pointer" @click="clearSearch"> </span>
        </div>
        <span class="w-[.0625rem] lg:h-[1.5rem] h-4 border-[.0625rem] border-solid border-[#E5E5E5]"> </span>
        <span @click="handleSearch" class="text-[#999999] el-icon-search text-[1.25rem] cursor-pointer"> </span>
      </div>
    </div>
    <div class="max-lg:px-4 lg:gap-8 lg:py-8 flex flex-col gap-12 py-4 mx-auto max-w-7xl">
      <div class="flex flex-col gap-4">
        <div class="lg:grid-cols-3 grid grid-cols-2 gap-4">
          <nuxt-link
            class="lg:gap-4 max-lg:gap-1 flex flex-col col-span-1 items-center p-6 bg-white rounded-2xl cursor-pointer"
            v-for="(i, k) in tabList"
            :key="k"
            :to="localePath(`/support/details?id=${i?.id}&ids=${i?.articles[0]?.id}`)"
          >
            <div class="lg:size-[2rem] size-[1.5rem]">
              <img
                loading="lazy"
                class="size-full object-cover"
                v-lazy="$globalFn.imgPrefixUrl(i.icon)"
                alt="Support category icon"
                title="Support category image"
              />
            </div>
            <h2 class="font-medium lg:text-[1rem] text-[0.75rem] text-[#121212]">
              {{ i.name }}
            </h2>
          </nuxt-link>
        </div>
        <!-- <div class="grid grid-cols-2 gap-4">
          <div
            class="flex flex-col col-span-1 gap-1 items-center p-5 bg-white rounded-2xl"
            v-for="(i, k) in 2"
            :key="k"
          >
            <div class="size-[2rem] bg-gray-600"></div>
            <h2 class="font-medium text-[1rem] text-[#121212]">Account</h2>
          </div>
        </div> -->
      </div>
      <!-- 常见问题 -->
      <!-- 常见问题 -->
      <!-- 常见问题 -->
      <template v-if="faqList.data.length">
        <div class="flex flex-col gap-4">
          <h2 class="font-semibold lg:text-[1.5rem] text-[1.25rem] lg:text-center text-left text-[#121212]">
            {{ $t('pages.question') }}
          </h2>
          <div class="lg:grid-cols-2 grid grid-cols-1 gap-4">
            <nuxt-link
              class="lg:p-5 flex col-span-1 justify-between items-center p-3 bg-white rounded-2xl cursor-pointer"
              v-for="(i, k) in faqList.data"
              :key="k"
              :to="localePath(`/support/details?id=${i.category_id}&ids=${i.id}`)"
            >
              <div class="lg:gap-4 flex flex-col gap-2">
                <span class="font-semibold lg:text-[1.25rem] text-[0.94rem] text-[#121212]">
                  {{ (i.category && i.category.name) || '' }}
                </span>
                <span class="font-normal lg:text-[1rem] text-[#121212] text-[.75rem]">
                  {{ i.title }}
                </span>
              </div>
              <div class="lg:size-[2rem] size-[1.5rem] bg-[#FAFAFA] rounded-[0.63rem] flex justify-center items-center">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="text-[#A1A1AA] size-4">
                  <path
                    fill-rule="evenodd"
                    d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd"
                  />
                </svg>
              </div>
            </nuxt-link>
          </div>
        </div>
      </template>
      <!-- 未得到解决 -->
      <!-- 未得到解决 -->
      <!-- 未得到解决 -->
      <div class="flex flex-col gap-4">
        <h2 class="font-semibold lg:text-[1.5rem] text-[1.25rem] text-[#121212] lg:text-center">
          {{ $t('pages.notSolved') }}
        </h2>
        <p class="font-normal lg:text-[0.88rem] text-[0.75rem] text-[#666666] lg:text-center">
          {{ $t('pages.notSolvedDesc') }}
        </p>
        <div class="lg:grid-cols-3 grid grid-cols-1 gap-4">
          <!-- 在线支持 -->
          <!-- 在线支持 -->
          <!-- 在线支持 -->
          <div class="lg:flex-col max-lg:justify-between max-lg:items-center lg:p-8 flex col-span-1 gap-4 p-3 bg-white rounded-2xl">
            <h2 class="font-medium lg:text-[1.22rem] text-[1rem] text-[#262626] whitespace-nowrap capitalize line-clamp-1">
              {{ $t('pages.onlineSupport') }}
            </h2>
            <div>
              <button
                @click="openCustomerService"
                class="px-4 lg:py-3 py-2 bg-[#FF4E33] rounded-[1.63rem] font-medium lg:text-[0.88rem] text-[0.77rem] text-white lg:mt-12 flex items-center justify-center gap-1"
              >
                <img
                  src="https://cd.sealmg.com/assets/img/ico_kefu.png"
                  class="size-[1.25rem]"
                  alt="Customer service icon"
                  title="Contact support"
                  loading="lazy"
                />
                <span class="capitalize whitespace-nowrap">{{ $t('pages.onlineSupportBtn') }}</span>
              </button>
            </div>
            <div class="font-medium text-[0.88rem] text-[#999999] hidden lg:flex">
              {{ $t('pages.onlineSupportDesc') }}
            </div>
          </div>
          <!-- 邮件支持 -->
          <!-- 邮件支持 -->
          <!-- 邮件支持 -->
          <div class="lg:flex-col max-lg:justify-between max-lg:items-center lg:p-8 flex col-span-1 gap-4 p-3 bg-white rounded-2xl">
            <h2 class="font-medium lg:text-[1.22rem] text-[1rem] text-[#262626] whitespace-nowrap">
              {{ $t('pages.emailSupport') }}
            </h2>
            <div class="font-medium lg:text-[1.13rem] text-[0.88rem] lg:py-3 py-2 text-[#262626] lg:mt-12 text-left select-all whitespace-nowrap">
              {{ initData.kefu_email }}
            </div>
            <div class="font-medium text-[0.77rem] lg:text-[0.88rem] text-[#999999] hidden lg:flex whitespace-nowrap">
              {{ $t('pages.emailSupportDesc') }}
            </div>
          </div>
          <!-- 意见反馈 -->
          <!-- 意见反馈 -->
          <!-- 意见反馈 -->
          <div class="lg:flex-col max-lg:justify-between max-lg:items-center lg:p-8 flex col-span-1 gap-4 p-3 bg-white rounded-2xl">
            <h2 class="font-medium lg:text-[1.22rem] text-[1rem] text-[#262626]">
              {{ $t('pages.feedback') }}
            </h2>
            <nuxt-link
              :to="localePath('/feedback')"
              class="px-4 lg:py-3 py-2 bg-[#FF4E33] rounded-[1.63rem] font-medium text-[0.88rem] text-white lg:mt-12 flex items-center justify-center gap-1"
            >
              <img
                src="https://cd.sealmg.com/assets/img/ico_kefu2.png"
                class="size-[1.25rem]"
                alt="Feedback icon"
                title="Submit feedback"
                loading="lazy"
              />
              <span class="capitalize whitespace-nowrap">{{ $t('pages.feedbackBtn') }}</span>
            </nuxt-link>
            <div class="font-medium text-[0.77rem] lg:text-[0.88rem] text-[#999999] hidden lg:flex">
              {{ $t('pages.feedbackDesc') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'problem',
    key(route) {
      return route.fullPath
    },
    head: {
      title: 'Support - SEALMG',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: "Discover frequently asked questions on SEALMG's support pages so you can quickly find answers and solutions to your issues."
        }
      ]
    },
    data() {
      return {
        searchterms: '', // 搜索关键词
        parentId: '', // 父级分类ID
        childId: '', // 子级分类ID
        category: {}, // 分类数据对象
        tabList: [], // 分类标签列表
        info: {}, // 详情信息
        isOk: false, // 是否成功标记
        isNo: false, // 是否失败标记
        faqList: {} // FAQ列表数据
        // Remove userInfo from data as it's defined in computed
      }
    },
    // beforeRouteUpdate(to, from, next) {
    //   this.tabId=to.query.type
    //   next()
    // },
    created() {
      // this.getProblem();
    },
    computed: {
      // 获取初始化数据
      initData() {
        return this.$store.state.initData.initData || {}
      },
      userInfo() {
        return this.$cookies.get('userInfo') || this.$store.state.user.userInfo || {}
      }
    },
    // 获取初始化数据
    async asyncData({ app, params }) {
      try {
        const [articleData, faqData] = await Promise.all([
          app.$axios.get('/api/cms.article/qa'),
          app.$axios.get('/api/cms.article/index', {
            params: {
              code: 'qa',
              pos: 1,
              is_cate_list: 1
            }
          })
        ])

        return {
          faqList: faqData,
          category: articleData.category || [],
          tabList: articleData.children || []
        }
      } catch (error) {
        console.error('Failed to fetch support data:', error)
        return {
          faqList: {},
          category: [],
          tabList: []
        }
      }
    },
    methods: {
      openCustomerService() {
        const customerServiceConfig = {
          token: 'fa44bc9b569378ccef22547d83506825',
          baseUrl: 'https://chat.sealmg.com/chat/index',
          defaultAvatar: 'https://cd.sealmg.com/assets/img/avator-img.png'
        }
        const chatParams = {
          token: customerServiceConfig.token,
          uid: this.userInfo?.uid || '',
          nickName: this.userInfo?.nickname || '',
          phone: '',
          sex: '1',
          avatar: this.userInfo?.avatar || customerServiceConfig.defaultAvatar,
          openid: ''
        }
        const queryString = new URLSearchParams(chatParams).toString()
        const chatUrl = `${customerServiceConfig.baseUrl}?${queryString}`
        window.open(chatUrl, '_blank')
      },
      // 清空搜索框
      clearSearch() {
        this.searchterms = ''
      },
      // 跳转到搜索页面
      handleSearch() {
        const searchText = this.searchterms?.trim()
        if (!searchText) {
          return
        }
        this.$router.push({
          path: this.localePath('/support/search'),
          query: {
            searchterms: searchText
          }
        })
      },
      // 获取常见问题解答
      async fetchFAQList() {
        try {
          const response = await this.$axios.get('/api/cms.article/qa')
          this.category = response?.category || {}
          this.tabList = response?.children || []
        } catch (error) {
          console.error('Failed to fetch FAQ list:', error)
          this.category = {}
          this.tabList = []
        }
      }
    },
    getProblem() {
      this.$axios.get(`/api/cms.article/qa`).then(res => {
        this.category = res.category || {}
        this.tabList = res.children || []
      })
    }
  }
</script>
